{% extends 'index.html' %}
{% load markdownify %}
{% load i18n %}
{% load base_tags %}
{% comment %}
This is where you can override the hero area block. You can simply modify the content below or replace it wholesale to meet your own needs.
{% endcomment %}
{% block hero %}
{% if custom_theme.welcome_theme == 'JUMBOTRON_BG' or not slides %}
<div class="jumbotron">
  <div class="container">
    {% with jumbotron_welcome_title=custom_theme.jumbotron_welcome_title|default:"Welcome"|template_trans %}
    <h1>{% trans jumbotron_welcome_title %}</h1>
    {% endwith %}
    <p></p>
    {% with jumbotron_welcome_content=custom_theme.jumbotron_welcome_content|default:"GeoNode is an open source platform for sharing geospatial data and maps."|template_trans %}
    <p>{% trans jumbotron_welcome_content %}</p>
    {% endwith %}
    {% if not custom_theme.jumbotron_cta_hide %}
    <p><a class="btn btn-default btn-lg" target="_blank"
        href="{{custom_theme.jumbotron_cta_link|default:_("https://docs.geonode.org/en/master/usage/index.html")}}"
        role="button">{{custom_theme.jumbotron_cta_text|default:_("Get Started &raquo;")}}</a></p>
    {% endif %}
  </div>
</div>
{% else %}
<div class="geonode-slide-show">
  <div class="jumbotron jumbotron--no_bg">
    <div class="container">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        {% if slides.count > 1%}
        <ol class="carousel-indicators">
          {% for slide in slides %}
          <li data-target="#myCarousel" data-slide-to="{{ forloop.counter | add:'-1' }}"
            class="{% if forloop.counter == 1 %}active{%endif%}"></li>
          {% endfor %}
        </ol>
        {% endif %}
        {% with jumbotron_welcome_title=custom_theme.jumbotron_welcome_title|default:"Welcome"|template_trans %}
        <h1 class="carousel-header">{% trans jumbotron_welcome_title %}</h1>
        {% endwith %}
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          {% for slide in slides %}
          <div class="item {% if forloop.counter == 1 %}active{%endif%}">
            {% if slide.jumbotron_slide_image %}
            <img src="{{ slide.jumbotron_slide_image_thumbnail.url }}" alt="{{ slide.slide_name }}">
            {% endif %}
            {% if not slide.hide_jumbotron_slide_content %}
            <div class="carousel-caption">
              {% with jumbotron_slide_content=slide.jumbotron_slide_content|markdownify %}
              {% trans jumbotron_slide_content %}
              {% endwith %}
            </div>
            {% endif %}
          </div>
          {% endfor %}
        </div>
        <!-- Left and right controls -->
        {% if slides.count > 1%}
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endblock hero %}